<template>
  <div class="approver select-person">
    <h3 class="title vux-1px-t">审批人<span class="require-item">*</span></h3>
    <flexbox class="select-images-list">
      <flexbox-item v-for="(item, index) in imagesList" :key="index">
        <i class="remove-icon" @click="removePerson(index)" v-if="index"></i>
        <div class="img-box">
          <img :src="item.imgUrl">
        </div>
        <p class=name>{{item.leaderName}}</p>
      </flexbox-item>
      <!-- <flexbox-item class="select-img" @click.native="selectPerson"></flexbox-item> -->
    </flexbox>
  </div>
</template>

<script>
  import { Flexbox, FlexboxItem } from 'vux';
  export default {
    name: 'Approver',
    data () {
      return {
        imagesList: [
          {
            imgUrl: require('../../assets/images/jack.jpg'),
            leaderName: 'PRO Jack 劉偉智'
          }
          // {
          //   imgUrl: require('../../assets/images/rita.jpg'),
          //   leaderName: 'PRO Rita 葉巧華'
          // }
        ]
      };
    },
    components: {
      Flexbox,
      FlexboxItem
    },
    mounted () {
    },
    methods: {
      selectPerson: function () {
        alert('选择审批人功能开发中');
      },
      removePerson: function (index) {
        this.imagesList.splice(index, 1);
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
</style>